<template>
	<view class="course-header">
		<image :src="course.mainImage" lazy-load></image>
		<view class="header-info">

			<text class="price-info" v-if="course.isFree">免费</text>
			<block v-else>
				<!-- 优惠价 -->
				<text v-if="course.priceDiscount">￥{{course.priceDiscount}}</text>
				<!--原价一直显示（有优惠价时显示price类名）-->
				<text :class="{price: course.priceDiscount}">￥{{course.priceOriginal}}</text>
				<text v-if="course.priceDiscount" class="youhui">优惠价</text>
			</block>

			<view class="title">
				{{course.title}}
			</view>
			<view class="count">
				<text class="iconfont icon-haoping2">{{course.goodRate}}好评</text>
				<text class="iconfont icon-touxiang2">{{course.studyTotal}}人在学</text>
			</view>
		</view>



	</view>
</template>
<script>
	export default {
		props: {
			course: {
				type: Object,
				default: () => ({
					"id": 10,
					"title": "Uniapp兼容多端在线教育项目实战",
					"studyTotal": 590, //在学人数
					"goodRate": '100%', //好评率
					"mainImage": "https://gd4.alicdn.com/imgextra/i4/3603079088/O1CN01dczOSM2H0LvTowhkl_!!3603079088.png",
					"isFree": 0, // 0 付费，1免费
					"priceOriginal": 614.51, //原价
					"priceDiscount": 281.91 // 优惠价
				})
			}
		}
	}
</script>

<style lang="scss">
	.course-header {
		.img {
			width: 750rpx;
			height: 420rpx;
			// 去掉底部白色背景
			display: block;
		}

		.header-info {
			padding: 25rpx;
			background-color: #FFFFFF;
			border: 25rpx solid grey;
			border-left: 0; //左边不无框
			border-right: 0; //右边不无框
		}

		.price-info {
			text {
				margin-right: 15rpx;

				&:first-child {
					color: red;
					font-size: 46rpx;
					font-weight: bold;
				}
			}

			.price {
				color: #B6BBBF;
				font-size: 30rpx;
				text-decoration: line-through; // 删除线
			}

			.youhui {
				color: red;
				font-size: 20rpx;
				border: 1px solid red;
				border-radius: 10rpx;
				padding: 0 3rpx;
			}
		}

		.title {
			font-size: 35rpx;
			font-weight: bold;
			color: #1d1d1f;
			padding-left: 8rpx;
		}

		.count {
			padding: 15rpx 0;

			text {
				margin-right: 15rpx;
				font-size: 20rpx;
				color: #7d828f;
				border-radius: 30rpx;
				padding: 15rpx;
				background-color: grey;
			}
		}
	}
</style><template>
	<view class="course-header">
		<image class="img" src="/static/images/banner1.jpg" lazy-load></image>
		<view class="header-info">
			<view class="price-info">
				<!-- 优惠价 -->
				<text v-if="true">￥7480.00</text>
				<!-- 原价一直会显示（有优惠价时，显示price类名） -->
				<text class="price">￥8800.00</text>
				<text v-if="true" class="youhui">优惠价</text>
			</view>
			<view class="title">
				Uniapp全家桶在线教育视频项目
			</view>
			<view class="count">
				<text class="iconfont icon-haoping2">100%好评</text>
				<text class="iconfont icon-touxiang2">1999人在学</text>
			</view>
		</view>
	</view>
</template>
<script>

</script>
<style lang="scss">
	.course-header {
		.img {
			width: 750rpx;
			height: 420rpx;
			// 去掉底部白色背景
			display: block;
		}

		.header-info {
			padding: 25rpx;
			background-color: #FFFFFF;
			// border: 25rpx solid grey;
			border-left: 0; //左边不无框
			border-right: 0; //右边不无框
		}

		.price-info {
			text {
				margin-right: 15rpx;

				&:first-child {
					// color: red;
					font-size: 46rpx;
					font-weight: bold;
				}
			}

			.price {
				color: #B6BBBF;
				font-size: 30rpx;
				text-decoration: line-through; // 删除线
			}

			.youhui {
				color: red;
				font-size: 20rpx;
				border: 1px solid red;
				border-radius: 10rpx;
				padding: 0 3rpx;
			}
		}

		.title {
			font-size: 35rpx;
			font-weight: bold;
			color: #1d1d1f;
			padding-left: 8rpx;
		}

		.count {
			padding: 15rpx 0;

			text {
				margin-right: 15rpx;
				font-size: 20rpx;
				color: #7d828f;
				border-radius: 30rpx;
				padding: 15rpx;
				// background-color: grey;
			}
		}
	}
</style>
